<template>
  <div class="container" :style="{width:CWidth}">
    <div class="card">
      <div class="card-heard">
        <slot name="cover"></slot>
      </div>
      <div class="card-body">
        <slot>
          <article class="title">{{title}}</article>
          <article class="abstract">{{abstract}}</article>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  import cards from '../config/cardConfig'
  export default {
    props:{
      title:{
        type:String,
        default: '标题'
      },
      abstract:{
        type:String,
        default: '摘要'
      },
      width:{
        type: Number||String,
        default:0
      }
    },
    name: "card",
    data:function(){
      return {
        cards
      }
    },
    computed:{
      /**
       * @return {string}
       */
      CWidth:function () {
        let val = this.width;
        // console.log(val);
        if(typeof val === 'number'){
          return String(val)+'px';
        }
        return val;
      }
    },
    mounted:function () {
    }
  }
</script>

<style scoped lang="less">
  .card{
    position: relative;
    display: inline-block;
    width: 100%;
    background: #ffffff;
  }
  .title{
    font-size: 12px;
    text-align: center;
    font-weight: bold;
  }
  .abstract{
    font-size: 10px;
    text-align: center;
    color: rgba(0,0,0,0.5);
  }

  .card-heard img{
    background-size: cover;
  }
  @media screen and (min-width: 500px) {
    @cardWidth: 100%;
    .container{
      display: inline-block;
      width: @cardWidth;
      max-width: 340px;
      padding: 4px 0 2px 0;
    }
    .card-heard img{
      width: 100%;
    }
    .card-body{
      padding: 0.5rem;
      background: #ffffff;
    }
  }

  @media screen and (max-width: 500px) {
    @cardWidth: 24rem;
    .container{
      display: block;
      width: @cardWidth;
      max-width: 110px;
      margin: 0 auto;
      padding: 5px 0;
    }
    .card-heard img{
      width: 100%;
    }
    .card-body{
      padding: 1.5rem;
      background: #ffffff;
    }
  }
</style>
